<%--
  Created by IntelliJ IDEA.
  User: 95126
  Date: 2021/4/29
  Time: 8:49
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <link rel="stylesheet" href="/boot/imgs/css/bootstrap.min.css">
    <link rel="stylesheet" href="/boot/imgs/css/all.min.css">
    <link rel="stylesheet" href="/boot/imgs/css/animate.css">
    <link rel="stylesheet" href="/boot/imgs/css/flaticon.css">
    <link rel="stylesheet" href="/boot/imgs/css/magnific-popup.css">
    <link rel="stylesheet" href="/boot/imgs/css/odometer.css">
    <link rel="stylesheet" href="/boot/imgs/css/owl.carousel.min.css">
    <link rel="stylesheet" href="/boot/imgs/css/owl.theme.default.min.css">
    <link rel="stylesheet" href="/boot/imgs/css/nice-select.css">
    <link rel="stylesheet" href="/boot/imgs/css/main.css">

    <link rel="shortcut icon" href="/boot/imgs/images/favicon.png" type="image/x-icon">

    <title>Boleto  - Online Ticket Booking Website HTML Template</title>
    <script src="/boot/imgs/js/jquery-3.3.1.min.js"></script>
    <script src="/boot/imgs/js/jquery-3.3.1.min.js"></script>
    <script src="/boot/imgs/js/modernizr-3.6.0.min.js"></script>
    <script src="/boot/imgs/js/plugins.js"></script>
    <script src="/boot/imgs/js/bootstrap.min.js"></script>
    <script src="/boot/imgs/js/isotope.pkgd.min.js"></script>
    <script src="/boot/imgs/js/magnific-popup.min.js"></script>
    <script src="/boot/imgs/js/owl.carousel.min.js"></script>
    <script src="/boot/imgs/js/wow.min.js"></script>
    <script src="/boot/imgs/js/countdown.min.js"></script>
    <script src="/boot/imgs/js/odometer.min.js"></script>
    <script src="/boot/imgs/js/viewport.jquery.js"></script>
    <script src="/boot/imgs/js/nice-select.js"></script>
    <script src="/boot/imgs/js/main.js"></script>

</head>
<style>
    .row{

        white-space: nowrap;
        margin-bottom: 10px;
        text-align: center;
    }
    .seats-wrapper{
        display: inline-block;
        min-width: 550px;
        text-align: center;
        vertical-align:middle
    }
    .seats-wrapper .row{
        white-space: nowrap;
        margin-bottom: 10px;
        text-align: center;
    }
    .row-id{
        font-size: 16px;
        color: #999;
        margin-right: 40px;
        margin-bottom: 10px;
        display: inline-block;
        width: 20px;
        height: 26px;
        line-height: 29px;
        text-align: center;
    }
    .selectable{
        display: inline-block;
        font-size: 0;
        width: 42px;
        height: 39px;
        margin: 0 5px;
        background: url(../imgs/images/movie/seat01-free.png) no-repeat;

    }
    .selected{
        display: inline-block;
        font-size: 0;
        width: 42px;
        height: 39px;
        margin: 0 5px;
        background: url(../imgs/images/movie/seat01-booked.png) no-repeat;
    }
    .sold{
        display: inline-block;
        font-size: 0;
        width: 42px;
        height: 39px;
        margin: 0 5px;
        background: url(../imgs/images/movie/seat01.png) no-repeat;

        pointer-events: none;
    }

</style>

<body>
<!-- ==========Preloader========== -->
<div class="preloader">
    <div class="preloader-inner">
        <div class="preloader-icon">
            <span></span>
            <span></span>
        </div>
    </div>
</div>
<!-- ==========Preloader========== -->
<!-- ==========Overlay========== -->
<div class="overlay"></div>
<a href="#0" class="scrollToTop">
    <i class="fas fa-angle-up"></i>
</a>
<!-- ==========Overlay========== -->

<!-- ==========Header-Section========== -->
<%@include file="nav/nav.jsp"%>
<!-- ==========Header-Section========== -->

<!-- ==========Banner-Section========== -->
<section class="details-banner hero-area bg_img seat-plan-banner" data-background="/boot/imgs/images/banner/banner04.jpg">
    <div class="container">
        <div class="details-banner-wrapper">
            <div class="details-banner-content style-two">
                <h3 class="title" id="movie-name">维纳斯</h3>
                <div class="tags">
                    <a href="#0">城市漫步</a>
                    <a href="#0">英语 - 2D</a>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- ==========Banner-Section========== -->

<!-- ==========Page-Title========== -->
<section class="page-title bg-one">
    <div class="container">
        <div class="page-title-area">
            <div class="item md-order-1">
                <a href="movie-ticket-plan.html" class="custom-button back-button">
                    <i class="flaticon-double-right-arrows-angles"></i>返回
                </a>
            </div>
            <div class="item date-item">
                <span class="date" id="move-date">MON, SEP 09 2020</span>
                <select class="select-bar" id="select-session">
                    <c:forEach items="${sessionList}" var="t">
                        <option <c:if test="${selected==t.id}">selected</c:if> value="${t.id}">${t.playTime}</option>
                    </c:forEach>
                </select>
            </div>
            <div class="item">
                <h5 class="title">05:00</h5>
                <p>最早时间</p>
            </div>
        </div>
    </div>
</section>
<!-- ==========Page-Title========== -->

<!-- ==========Movie-Section========== -->
<div class="seat-plan-section padding-bottom padding-top">
    <div class="container">
        <div class="screen-area">
            <h4 class="screen">屏幕</h4>
            <div class="screen-thumb">
                <img src="/boot/imgs/images/movie/screen-thumb.png" alt="movie">
            </div>
            <div class="screen-wrapper">

                <div class="seats-wrapper">
                </div>
                <h5 class="subtitle">silver plus</h5>

                <div class="proceed-book bg_img" data-background="">
                    <div class="proceed-to-book">
                        <div class="book-item">
                            <span>您已选择座位</span>
                            <h3 class="title" id="ticket"></h3>
                        </div>
                        <div class="book-item">
                            <span>总价格</span>
                            <h3 class="title" id="price"></h3>
                        </div>
                        <div class="book-item">
                            <button class="custom-button" id="buyall" style="width: 120px">包场</button>
                        </div>
                        <div class="book-item">
                            <button class="custom-button" id="lock-seat">确认选座</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- ==========Movie-Section========== -->

        <!-- ==========Newslater-Section========== -->
        <%@include file="footer/footer.jsp"%>
        <!-- ==========Newslater-Section========== -->
    </div>
</div>
<script>
    var SeatMax=0;
    var schedule_id = 10;
    var TempLength;
    var Seatrow = [], Seatcol = [];
    var price=35.3;
    var array=new Array(64);
    window.onload = function(){

        initSeat();
    }
    function initSeat(){

        <c:forEach items="${seatsinit}" var="v" varStatus="st">
        array[${st.index}]=${v.state};

        </c:forEach>
        var SeatRow = $(".row-id-container");
        var seat = $(".seats-wrapper");
        var row;
        var HtmlRowHead = "<div class=\"row\">\n";
        var HtmlRowLast = "</div>";
        var HtmlSeat;
        var flag;
        var stats=0;
        for(let i=0;i<8;i++)
        {
            SeatRow.append("<span class=\"row-id\">" + (i + 1) + "</span>");
            seat.append(HtmlRowHead);
            row = $(".seats-wrapper").find(".row").last();
            for(let j=0;j<8;j++)
            {
                if(array[stats++]==1){
                    HtmlSeat = "<span class=\"selectable\" onclick=\"buySeat(" + i + "," + j +")\"></span>";
                }else{
                    HtmlSeat = "<span class=\"sold\" onclick=\"buySeat(" + i + "," + j +")\"></span>";//已售
                }
                row.append(HtmlSeat);
            }
            seat.append(HtmlRowLast);
            if(i==4){
                seat.append("<h5 class=\"subtitle\">silver plus</h5>");
            }
        }
    }

    function buySeat(i,j){
        var row = $(".seats-wrapper").find(".row")[i].children[j];
        var flag = 0;
        var ticket=$("#ticket");
        var index=(i+1)+"排"+(j+1)+"座";
        //确定
        if((SeatMax<4) && (row.className == "selectable")){
            row.className = "selected";
            SeatMax++;
            flag = 1;
            if(""==ticket.text()||ticket.text()==null)
                ticket.text(index);
            else{
                ticket.text(ticket.text()+","+index);
            }
        }
        //取消
        if((row.className == "selected") && (flag==0)){
            row.className = "selectable";
            SeatMax--;
            var arr=ticket.text().split(",");
            for(let i=0;i<arr.length;i++){
                if(arr[i]==index){
                    arr.splice(i,1);
                }
            }
            var newStr = arr.join(",");
            ticket.text(newStr);
            // $("#price").text((price*arr.length).toFixed(2));
        }
        if(""==ticket.text()||ticket.text()==null){
            $("#price").text("");
        }else{
            var count=ticket.text().split(",").length;
            $("#price").text((price*count).toFixed(2));
        }
    }
    $("#lock-seat").click(function(){
        var total=$("#ticket").text();
        if(total==null||total==""){
            alert("请先选择座位!!");
        }else{

            let movieName=$("#movie-name").text();
            let seatArea=$("#ticket").text();
            let total=$("#price").text();
            let session= $(".select-bar option:selected").text();
            let date=$("#move-date").text();

            let formValue={"movieName":movieName,"seatArea":seatArea,"price":price,"total":total,"session":session,"date":date,}

            $.get('/boot/seat/seatsuccess',formValue,function(data){
                window.location='/boot/seat/play';
            })
        }
    })
    $("#select-session").change(function() {
        let session = $(".select-bar option:selected").val();
        window.location="/boot/seat/plan?session="+session;
    })
    $("#buyall").click(function(){

        let selectable=$(".selectable");
        if(selectable.length==64){

            let session = $(".select-bar option:selected").val();
            let movieName=$("#movie-name").text();
            let total=2000.0;
            let date=$("#move-date").text();

            let formValue={"movieName":movieName,"seatArea":"包场","price":price,"total":total,"session":session,"date":date,}
            alert(formValue);
            $.get('/boot/seat/seatsuccess',formValue,function(data){
                window.location="/boot/seat/play";
            })
        }else{
            alert("场次已有座，不能包场！");
        }
    })
</script>

</body>

</html>
